<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Milano | Interactive Responsive HTML5 Template</title>
	<link rel="shortcut icon" href="favicon.ico">

	<!-- Add your CSS files here -->
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/themes/green.css">

	<!-- Add your fonts here -->
	<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

	<!-- Add your scripts here -->
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script>
		function initialize() {
		  var myLatlng = new google.maps.LatLng(-37.817532,144.967148);
		  var mapOptions = {
		    zoom: 14,
		    center: myLatlng,
		    mapTypeId: google.maps.MapTypeId.ROADMAP
		  }
		  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

		  var marker = new google.maps.Marker({
		      position: myLatlng,
		      map: map,
		      title: 'Visit us here!'
		  });
		}

		google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>
<body>

<a href="http://themeforest.net/item/milano-interactive-responsive-html5-template/5110008" title="Get this Theme" class="badge">Get this Theme</a>

<div class="settings">
	<a href="#" class="icon-cog"></a>
	<span class="themes">
		<a href="#" class="theme" data-color="red">Theme Red</a>
		<a href="#" class="theme" data-color="green">Theme Green</a>
		<a href="#" class="theme" data-color="blue">Theme Blue</a>
		<a href="#" class="theme" data-color="white">Theme White</a>
		<a href="#" class="theme" data-color="rose">Rose Color</a>
		<a href="#" class="theme" data-color="aqua">Aqua Color</a>
		<a href="#" class="theme" data-color="orange">Orange Color</a>
	</span>
</div>

<div class="container">

	<div class="logo"><img src="img/logo.svg" alt="Logo"></div>

	<div class="social">
		<a href="http://facebook.com/rocketthemes" class="icon-facebook" title="Facebook"></a>
		<a href="http://twitter.com/rocketthemes" class="icon-twitter" title="Twitter"></a>
		<a href="#" class="icon-googleplus" title="Googleplus"></a>
		<a href="#" class="icon-dribbble" title="Dribbble"></a>
		<a href="#" class="icon-behance" title="Behance"></a>
		<a href="#" class="icon-instagram" title="Instagram"></a>
		<a href="#" class="icon-flickr" title="Flickr"></a>
	</div>
	<!-- Social Icons End -->

	<header>
		<nav id="nav">
			<ul class="nav">
				<li><img src="img/logo.svg" alt="My Logo"></li>
				<li><a href="index.html" class="icon-user"><span>Profile</span></a></li>
				<li><a href="work.html" class="icon-briefcase"><span>Work</span></a></li>
				<li><a href="resume.html" class="icon-list"><span>Resume</span></a></li>
				<li class="active"><a href="contact.html" class="icon-mail"><span>Contact</span></a></li>
			</ul>
		</nav>
	</header>
	<!-- Header End -->

	<section class="content">

		<div id="map"></div>

		<article class="contact">

			<h2>Inquiry</h2>
			<form action="http://rocketthemes.net/milano/send.php" name="contactform" class="contactform" method="post">
				<label for="name">Full name<span class="required">*</span></label>
				<input type="text" name="name" id="name" placeholder="Enter your name" required>

				<label for="company">Company<span class="required">*</span></label>
				<input type="text" name="company" id="company" placeholder="Where do you work?" required> 

				<label for="email">Email address<span class="required">*</span></label>
				<input type="email" name="email" id="email" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$" placeholder="e.g. info@envato.com" required>

				<div class="budgetrange">
					<label for="budget1">Budget range<span class="required">*</span></label><br>
					<input type="radio" name="budget" id="budget1" value="$1.000 - €2.000" checked>
					<label for="budget1" class="radio">$1.000 - 2.000</label>
					<input type="radio" name="budget" id="budget2" value="$2.001 - €5.000">
					<label for="budget2" class="radio">$2.001 - 5.000</label>
					<input type="radio" name="budget" id="budget3" value="$5.001 - 10,000+">
					<label for="budget3" class="radio">$5.001 - 10,000+</label>
				</div>

				<label for="project">Project description<span class="required">*</span></label><br>
				<textarea name="project" id="project" cols="40" rows="3" placeholder="Describe your project and add some details." required></textarea>
				<input type="submit" name="submit" id="submit" value="Send">
			</form>

		</article>
		<!-- Contact End -->

		<aside class="sidebar">
			<div class="c-data">
				<h2>Contact</h2>
				<p>
					<strong>Jonathan Doe</strong><br>
					Flinders St 35<br>
					23456 Melbourne<br>
					Australia
				</p>
				<p>
					<strong>E-Mail Contact:</strong>
					<a class="c-email" href="mailto:spam@rocketthemes.net">spam@rocketthemes.net</a>
				</p>
				
			</div>
		</aside>
		<!-- Sidebar End -->

	</section>
	<!-- Content Section End -->

</div>
<!-- Container End -->

<!-- Add your scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/plugins.js"></script>

<script>
      var navigation = responsiveNav("#nav", {
        animate: true,        // Boolean: Use CSS3 transitions, true or false
        transition: 400,      // Integer: Speed of the transition, in milliseconds
        label: "",            // String: Label for the navigation toggle
        insert: "before",     // String: Insert the toggle before or after the navigation
        customToggle: "",     // Selector: Specify the ID of a custom toggle
        openPos: "relative",  // String: Position of the opened nav, relative or static
        jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
        init: function(){},   // Function: Init callback
        open: function(){},   // Function: Open callback
        close: function(){}   // Function: Close callback
      });
</script>

</body>
</html>